<example name="Pager">
  <file type="html">
    <div id="pager"></div>
  </file>
  <file type="js">
    import React, {Component, createElement} from 'react';
    import {render} from 'react-dom';
    import Pager from '@jetbrains/ring-ui/components/pager/pager';

    class Example extends Component {
      state = {
        total: 750,
        currentPage: 1
      }

      render() {
        const {total, currentPage} = this.state;
        return (
          <Pager
            total={total}
            currentPage={currentPage}
            disablePageSizeSelector={true}
            onPageChange={currentPage => this.setState({currentPage})}
          />
        );
      }
    }

    render(createElement(Example, {}), document.getElementById('pager'));
  </file>
</example>

<example name="Pager with a custom frame size">
  <file type="html">
    <div id="pager"></div>
  </file>
  <file type="js">
    import React, {Component, createElement} from 'react';
    import {render} from 'react-dom';
    import Pager from '@jetbrains/ring-ui/components/pager/pager';

    class Example extends Component {
      state = {
        total: 750,
        currentPage: 1
      }

      render() {
        const {total, currentPage} = this.state;
        return (
          <Pager
            total={total}
            currentPage={currentPage}
            visiblePagesLimit={3}
            disablePageSizeSelector={true}
            onPageChange={currentPage => this.setState({currentPage})}
          />
        );
      }
    }

    render(createElement(Example, {}), document.getElementById('pager'));
  </file>
</example>

<example name="Pager with a custom frame size #2">
  <file type="html">
    <div id="pager"></div>
  </file>
  <file type="js">
    import React, {Component, createElement} from 'react';
    import {render} from 'react-dom';
    import Pager from '@jetbrains/ring-ui/components/pager/pager';

    class Example extends Component {
      state = {
        total: 250,
        currentPage: 1
      }

      render() {
        const {total, currentPage} = this.state;
        return (
          <Pager
            total={total}
            currentPage={currentPage}
            visiblePagesLimit={5}
            disablePageSizeSelector={true}
            onPageChange={currentPage => this.setState({currentPage})}
          />
        );
      }
    }

    render(createElement(Example, {}), document.getElementById('pager'));
  </file>
</example>

<example name="Pager with a custom frame size #3">
  <file type="html">
    <div id="pager"></div>
  </file>
  <file type="js">
    import React, {Component, createElement} from 'react';
    import {render} from 'react-dom';
    import Pager from '@jetbrains/ring-ui/components/pager/pager';

    class Example extends Component {
      state = {
        total: 400,
        currentPage: 1
      }

      render() {
        const {total, currentPage} = this.state;
        return (
          <Pager
            total={total}
            currentPage={currentPage}
            visiblePagesLimit={5}
            disablePageSizeSelector={true}
            onPageChange={currentPage => this.setState({currentPage})}
          />
        );
      }
    }

    render(createElement(Example, {}), document.getElementById('pager'));
  </file>
</example>

<example name="Pager with a page size selector">
  <file type="html">
    <div id="pager"></div>
  </file>
  <file type="js">
    import React, {Component, createElement} from 'react';
    import {render} from 'react-dom';
    import Pager from '@jetbrains/ring-ui/components/pager/pager';

    class Example extends Component {
      state = {
        total: 300,
        currentPage: 1,
        pageSize: 50
      }

      render() {
        const {total, currentPage, pageSize} = this.state;
        return (
          <Pager
            total={total}
            currentPage={currentPage}
            pageSize={pageSize}
            onPageChange={currentPage => this.setState({currentPage})}
            onPageSizeChange={pageSize => this.setState({pageSize})}
          />
        );
      }
    }

    render(createElement(Example, {}), document.getElementById('pager'));
  </file>
</example>
